{{setTitle     "布局"}}
{{setSubTitle  "快速开始你的下一个web项目"}}
{{setActiveNav "layouts"}}

{{addLocalCSS "/css/layouts.css"}}

{{> header}}

<div class="content">
    <h2 class="content-subhead">常见的布局</h2>
    <p>
        Pure的目标，是希望Pure能够适应到每一个web项目上。为了证明这一点，我们已经制作了一些使用Pure的常见布局。这些布局不需要写任何的javascript就可以实现响应式效果。
    </p>

    <aside>
        <p>
            当你浏览这些布局的时候，你可以查看或者复制它的源码自己实现一下，这样就可以更好地理解这些布局是怎么实现的。
        </p>
    </aside>

    <div class="pure-g-r layout-item">
        <div class="pure-u-1-2">
            <a  target="_blank"  href="{{pages.layoutsMarketing}}">
                <img src="/img/layouts/marketing@2x.jpg" class="bordered" width="400" height="214"
                     alt="产品展示例子截图">
            </a>
        </div>

        <div class="pure-u-1-2">
            <div class="l-hbox">
                <h3 class="layout-item-head">产品展示</h3>

                <p>
                    这种布局是展示产品的响应式页面，它使用了<a href="{{pages.grids}}">网格模块</a>和<a href="{{pages.menus}}">菜单模块</a>。
                </p>

                <p><a  target="_blank"  href="{{pages.layoutsMarketing}}" class="pure-button">查看布局</a></p>
            </div>
        </div>
    </div>

    <div class="pure-g-r layout-item">
        <div class="pure-u-1-2">
            <a target="_blank"  href="{{pages.layoutsGallery}}">
                <img src="/img/layouts/gallery@2x.jpg" class="bordered" width="400" height="214" alt="图片例子截图">
            </a>
        </div>

        <div class="pure-u-1-2">
            <div class="l-hbox">
                <h3 class="layout-item-head">图片展示</h3>

                <p>
                    这个是展示图片的布局，它利用了<a href="{{pages.grids}}">网格模块</a>，<a href="{{pages.menus}}">菜单模块</a>和<a href="{{pages.forms}}"> 表单模块 </a>
                </p>

                <p><a target="_blank"  href="{{pages.layoutsGallery}}" class="pure-button">查看布局</a></p>
            </div>
        </div>
    </div>


    <div class="pure-g-r layout-item">
        <div class="pure-u-1-2">
            <a target="_blank"  href="{{pages.layoutsEmail}}">
                <img src="/img/layouts/email@2x.jpg" class="bordered" width="400" height="214"  alt="邮箱例子截图">
            </a>
        </div>

        <div class="pure-u-1-2">
            <div class="l-hbox">
                <h3 class="layout-item-head">邮箱</h3>

                <p>
                    这个是响应式的邮箱布局界面。它利用了<a href="{{pages.grids}}">网格模块</a>和<a href="{{pages.menus}}">菜单模块</a>。
                </p>

                <p><a target="_blank"  href="{{pages.layoutsEmail}}" class="pure-button"> 查看布局 </a></p>
            </div>
        </div>
    </div>

    <div class="pure-g-r layout-item">
        <div class="pure-u-1-2">
            <a target="_blank"  href="{{pages.layoutsBlog}}">
                <img src="/img/layouts/blog@2x.jpg" class="bordered" width="400" height="214" alt="博客例子截图">
            </a>
        </div>

        <div class="pure-u-1-2">
            <div class="l-hbox">
                <h3 class="layout-item-head">博客</h3>

                <p>
                    这是一个博客的文章列表的而已。它使用了<a href="{{pages.grids}}">网格模块</a>, <a href="{{pages.menus}}">菜单模块</a>和<a href="{{pages.buttons}}">按钮模块</a>.
                </p>

                <p><a target="_blank" href="{{pages.layoutsBlog}}" class="pure-button">查看布局</a></p>
            </div>
        </div>
    </div>
</div>
